<!-- 业务项目详情-->
<template>
	<view style="background-color: #F7F7F7;">
		<view v-if="editId" class="stepRow">
			<image class="all_stepIcon" src="../../static/images/jindu1.png" v-if="!planeStatus" @click="handleChekcPlan"
				mode=""></image>
			<image class="all_stepIcon" src="../../static/images/jindu2.png" v-if="planeStatus" @click="handleChekcPlan"
				mode=""></image>
			<view class="finnaceStep" v-if="planeStatus">
				<view class="MyStep" v-for="(item, index) in stepList">
					<view class="stepLine" v-if="!(index == stepList.length - 1)"></view>
					<view class="stepRow1">
						<image class="stepIdot" src="../../static/images/icon_jd1@2x.png" mode=""></image>
						<text class="stepdate" style="width:300rpx">{{ item.add_time }}</text>
						<text class="stepdate">{{ item.memberInfo.nickname + ' 提交' }}</text>
					</view>
					<view class="stepRow2" v-if="item.approval_status == '0'">
						<text class="stepusername" style="margin-left:50rpx">
							<text v-for="items in item.tomemberInfo">
								{{ items.nickname + ' ' }}
							</text>
						</text>
						<text class="stepstatus">待审批</text>
					</view>
					<view class="stepRow2" v-if="item.approval_status == '1'">
						<text class="stepusername" style="margin-left:50rpx">{{ item.executorInfo.nickname }}</text>
						<text class="stepusername" style="width:280rpx">{{ item.update_time }}</text>
						<text style="color:rgb(18, 139, 241)" class="stepstatus">通过</text>

					</view>
					<view class="stepRow2" v-if="item.approval_status == '-1'">
						<text class="stepusername" style="margin-left:50rpx">{{ item.executorInfo.nickname }}</text>
						<text class="stepusername" style="width:280rpx">{{ item.update_time }}</text>
						<text style="color:rgb(255, 51, 51)" class="stepstatus">驳回</text>
					</view>
					<!-- 备注 -->
					<view class="stepRow2" v-if="item.remark != null">
						<text style="margin-left:50rpx;font-size: 24rpx;color: #999999;">
							{{ item.remark }}
						</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 客户信息 -->
		<scroll-view scroll-y class="client_info" :class="editId ? 'ischeckOutInfo' : ''">
			<!-- 驳回节点选择 -->
			<!-- <view class="info_item" v-show="
					addReimbursementForm.approval_status &&
						addReimbursementForm.approval_status == '1'">
				<view class="Warptitle all_text_title">驳回节点</view>

				<input disabled="true" style="margin-top: 39rpx; padding-bottom: 10rpx;" v-model="stage"
					placeholder-style="color:#999999;" @click="stageSlect()" />
			</view>
			<view class="stage_class" v-show="stage_show">
				<view class="stage_nickname" v-for="(item,index) in stageList" @click="setStage(item,index)">
					{{item[index].nickname}}
				</view>
			</view> -->
			<!-- 审批备注 -->
			<view class="textAreaRow" v-if="
					addReimbursementForm.approval_status &&
						addReimbursementForm.approval_status == '1'
				">
				<view class="textTitle all_text_title">审批备注</view>
				<textarea v-model="aprovalRemark" class="textar" placeholder-style="margin:30rpx" maxlength="-1" auto-height="true" />
			</view>

			<!-- 申请人 -->
			<view class="info_item" v-show="
					addReimbursementForm.approval_status &&
						addReimbursementForm.approval_status == '1'">
				<view class="Warptitle all_text_title">申请人</view>
				<input :disabled="isDisable" style="margin-top: 39rpx; padding-bottom: 10rpx;"
					v-model="addReimbursementForm.member.nickname" placeholder-style="color:#999999;" />
			</view>

			<view class="" style="text-align: center;color: #FF5A5F;font-size: 28rpx;" v-if="
						addReimbursementForm.approval_status != '1'">
				<text>*此项表单仅为业务汇报项目使用，提交给总经理知悉*</text>
			</view>

			<!-- 项目名称 -->
			<view class="info_item" style="border: 0;">
				<view class="Warptitle all_text_title">项目名称</view>
				<input :disabled="isDisable" v-model="addReimbursementForm.project_name"
				:class="isDisable?'all_new_input_disable_style':'all_new_input_style'"
					style="margin-top: 39rpx; padding-bottom: 10rpx;" 
					placeholder-style="color:#999999;" @blur="checkName"/>
			</view>
			<!-- 相似企业展示框 -->
				<u-popup :show="simiFirmShow" mode="center"  @close="closesimiFirmShow" @open="" :safeAreaInsetBottom="false">
			        <view style="width: 600rpx;">
						<view class="" style="text-align: center;margin-top: 10rpx;color: #40A0F2;">
							相似项目展示
						</view>
						<scroll-view scroll-y="true" style="max-height: 600rpx;">
							<view class="all_relevant_item_text" v-for="item in simiFirmList" style="height: auto;" @click="goSimiFirmProject(item)">
								<view class="" style="">
									{{item.project_name}}
								</view>
								<view class="" style="margin-top: 8rpx;font-size: 26rpx;color: #40A0F2;">
									<text style="">申请人:</text><text style="margin-left: 10rpx;">{{item.member_show}}</text>
								</view>
							</view>
							<view class="" style="width: 100%;height: 20rpx;"></view>
						</scroll-view>
			        </view>
				</u-popup>

			<!-- 项目类型 -->
			<view class="info_item" style="border: 0;">
				<view class="Warptitle all_text_title">项目类型</view>
				<input :disabled="isDisable" v-model="addReimbursementForm.pte_type"
				:class="isDisable?'all_new_input_disable_style':'all_new_input_style'"
					style="margin-top: 39rpx; padding-bottom: 10rpx;" 
					placeholder-style="color:#999999;" />
			</view>
			
			<view style="overflow: hidden;margin-bottom: 100rpx;">
				<!-- 存档日期 -->
				<view class="info_item" style="border: 0;">
					<view class="Warptitle all_text_title">登记时间</view>
					<picker mode="date" @change="setOnFileDate" :disabled="isDisable">
						<view class="onFileDate" :class="isDisable?'all_new_input_disable_style':'all_new_input_style'">{{addReimbursementForm.record_time}}</view>
					</picker>
				</view>
				<!-- 金额 -->
				<view class="info_item" style="border: 0;">
					<view class="Warptitle all_text_title">金额</view>
					<input :disabled="isDisable" v-model="addReimbursementForm.total"
					:class="isDisable?'all_new_input_disable_style':'all_new_input_style'"
						style="margin-top: 39rpx; padding-bottom: 10rpx;" 
						placeholder-style="color:#999999;" />
				</view>
				<!-- 备注 -->
				<view class="textAreaRow">
					<view class="textTitle all_text_title">备注</view>
					<textarea :disabled="isDisable" v-model="addReimbursementForm.remark" class="textar" maxlength="-1"
						auto-height="true" />
				</view>
				<!-- 附件上传 -->
				<view class="info_item2" style="border: 0;">
					<upload-file :isSubmit="!isDisable" :imgList="addReimbursementForm.annex"
						:detailsImgList="detailsImgList" @my-upload-change="upLoadChange"></upload-file>
				</view>

			</view>

		</scroll-view>

		<!-- 底部按钮 -->
		<view class="bottom">
			<view v-if="addReimbursementForm.approval_status == '1' && addReimbursementForm.withdraw_status != 1">
				<button class="bottom_btn" style="background: #CCCCCC; width: 380rpx;" @click="handleApprovel('-1')"
					form-type="reset">
					驳回
				</button>
				<button class="bottom_btn"
					style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
					@click="handleApprovel('1')" form-type="submit">
					审批通过
				</button>
			</view>
			<view v-else>
				<button class="bottom_btn" style="background: #CCCCCC; width: 380rpx;" @click="handleCancelClick"
					form-type="reset" v-if="!isDisable">
					保存草稿
				</button>
				<button class="bottom_btn"
					style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
					v-if="editId && !isDisable" @click="handleSubmitEdit" form-type="submit">
					提交
				</button>
				<button class="bottom_btn"
					style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
					v-if="!editId && !isDisable" @click="handleSubmitAdd" form-type="submit">
					确定
				</button>
			</view>
		</view>
		
		<!-- 审批可撤回时显示 -->
		<view class="bottom"
			v-if="addReimbursementForm.is_just == 1">
			<button class="bottom_btn" @click="finnaceWithdraw()" style="background: #DD524D; width: 100%;"
				form-type="reset">
				审批撤回
			</button>
		</view>

		<!-- 可撤回时显示 -->
		<view class="bottom"
			v-if="addReimbursementForm.is_edit == 0 && addReimbursementForm.withdraw_status == 1 && addReimbursementForm.approval_status != 1">
			<button class="bottom_btn" @click="handleWithdraw()" style="background: #DD524D; width: 100%;"
				form-type="reset">
				撤回
			</button>
		</view>
		<!-- 可撤回时显示 -->
		<view class="bottom2"
			v-if="addReimbursementForm.approval_status == 1 && addReimbursementForm.withdraw_status == 1">
			<button class="bottom_btn2" @click="handleWithdraw()" style="background: #FF5A5F; margin-left: 0;">
				撤回
			</button>
			<button class="bottom_btn2" @click="handleApprovel('-1')" style="background: #CCCCCC;margin-left: 33%;">
				驳回
			</button>
			<button class="bottom_btn2" style="background: linear-gradient(0deg, #037CE3, #2EB3FF);margin-left: 66%;"
				@click="handleApprovel('1')">
				审批通过
			</button>
		</view>

	</view>
</template>

<script>
	import UploadFile from '@/components/upload-file.vue';
	export default {
		components: {
			UploadFile
		},
		data() {
			return {
				detailsImgList: [],
				addReimbursementForm: {
					// 审批撤回
										is_just: 0,
					total: '', //到账金额
					paid: '', //已付金额
					ontract_no: '', //合同编号
					manager: '', //交存人
					remark: '',
					annex: '',
					project_name: '',
					pte_type:'',//项目类型
					record_time: '点击选择日期',
					date_sign: '点击选择签订日期',
					project_id: [],
					project_type: '',
					member: {
						nickname: ''
					}
				},
				imgList: [],
				client_project_name: [],
				client_project_name_show: '',
				projectList: [],
				isShowProjectType: false,
				planeStatus: false,
				checkId: '',
				searchInfoProject: '',
				editId: '',
				token: '',
				member_id: '',
				company_id: '',
				projectTypeList: [],
				isShowClientType: false, //控制客户类型选择是否显示
				client_type_name: '项目实施相关费用',
				addFormData: {
					type: '1',
					remark: '',
					date: '',
					annex: ''
				},

				stepList: [],
				aprovalRemark: '',
				isDisable: false,
				showUrl: '',
				submitImgList: '',
				stage: '点击选择',
				stageList: [],
				stage_show: false,
				stage_code: '',
				
				simiFirmList: [], //相似企业
				simiFirmShow: false,
			};
		},
		onShow() {
			// this.getProjectType()
		},
		async onLoad(options) {
			this.token = uni.getStorageSync('btlh_process_token') || '';
			this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
			this.editId = options.finnaceId || '';
			// this.getProjectList();
			if (this.editId) {
				setTimeout(() => {
					this.getClientDetails();
				});
			}
		},
		//#ifdef MP-WEIXIN
		onShareAppMessage() {
			return {
				title:this.addReimbursementForm.project_name,
				path: '/packageProject/businessProject/businessProjectDetail?finnaceId=' + this.editId
			}
		},
		//#endif
		methods: {
			// 点击审批撤回
			async finnaceWithdraw(){
				const {
					data: res
				} = await this.$myRequest({
					url: 'Management/finance_approve_withdraw',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						finance_id: this.editId,
						stage_code: 'bproject'
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				uni.showToast({
					title:'审批撤回成功',
					icon:'none',
					mask:true
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta: 1
					})
				},1000)
			},
			
			// 点击前往相似企业
			goSimiFirmProject(item){
				if(item.id == this.editId){
					return this.simiFirmShow = false;
				}
				
				uni.navigateTo({
					url: `/packageProject/businessProject/businessProjectDetail?finnaceId=${item.id}`
				});
			},
			// 业务名称检测
			async checkName() {
				if(this.addReimbursementForm.project_name == ''){
					return
				}
				
				const {
					data: res
				} = await this.$myRequest({
					url: 'BProject/bproject_name_check',
					method: 'GET',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						search: this.addReimbursementForm.project_name
					}
				});
				if (res.datas.listInfo.length != 0) {
			
					this.simiFirmList = res.datas.listInfo;
					this.simiFirmShow = true;
				}
				console.log(res.datas.msg)
			},
			// 关闭相似企业弹窗
			closesimiFirmShow() {
				this.simiFirmShow = false;
			},
			
			// 设置驳回节点
			setStage(item, index) {
				this.stage = item[index].nickname
				this.stage_code = index
				this.stage_show = false
			},
			// 点击显示驳回节点
			stageSlect() {
				this.stage_show = !this.stage_show
			},
			// 点击撤回
			async handleWithdraw() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Finance/withdraw',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						finance_id:this.editId,
						stage_code: 'bproject'
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				uni.navigateBack({
					delta: 1
				})
			},
			// 设置签订日期
			setContractDate(e) {
				this.addReimbursementForm.date_sign = e.target.value
			},
			// 设置存档日期
			setOnFileDate(e) {
				this.addReimbursementForm.record_time = e.target.value
			},
			// 文件上传
			upLoadChange(data) {
				console.log('文件列表', data);
				this.submitImgList = data;
			},
			
			// 防抖点击 保存草稿
			handleCancelClick(){
				this.$debounce(this.handleCancelClick2);
			},
			// 防抖动点击 新增提交
			handleSubmitAdd(){
				this.$debounce(this.handleSubmitAdd2)
			},
			// 防抖动点击 编辑提交
			handleSubmitEdit(){
				this.$debounce(this.handleSubmitEdit2)
			},
			// 保存草稿
			async handleCancelClick2() {
				if (this.editId) {
					const {
						data: res
					} = await this.$myRequest({
						url: 'BProject/bproject_edit',
						method: 'GET',
						data: {
							member_id: this.member_id,
							token: this.token,
							company_id: this.company_id,

							is_draft: '1',
							project_id: this.editId,
							total: this.addReimbursementForm.total,
							record_time: this.addReimbursementForm.record_time,
							project_name: this.addReimbursementForm.project_name,
							remark: this.addReimbursementForm.remark,
							annex: JSON.stringify(this.submitImgList),
							pte_type:this.addReimbursementForm.pte_type
						}
					});
					if (res.code != 200)
						return uni.showToast({
							title: res.datas.msg,
							icon: 'none'
						});
					uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				} else {
					const {
						data: res
					} = await this.$myRequest({
						url: 'BProject/bproject_add',
						method: 'GET',
						data: {
							member_id: this.member_id,
							token: this.token,
							company_id: this.company_id,

							is_draft: '1',
							total: this.addReimbursementForm.total,
							record_time: this.addReimbursementForm.record_time,
							project_name: this.addReimbursementForm.project_name,
							remark: this.addReimbursementForm.remark,
							annex: JSON.stringify(this.submitImgList),
							pte_type:this.addReimbursementForm.pte_type
						}
					});
					if (res.code != 200)
						return uni.showToast({
							title: res.datas.msg,
							icon: 'none'
						});
					uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				}

				uni.navigateBack({
					delta: 1
				});
			},
			// 审批提交
			async handleApprovel(val) {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Management/finance_approval',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						finance_id: this.editId,

						stage_code: 'bproject',
						approval_status: val,
						remark: this.aprovalRemark,
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
				/* uni.switchTab({
					url: '/pages/finnace/finnace'
				}); */
				uni.navigateBack({
					delta: 1
				})
			},
			// 新增提交
			async handleSubmitAdd2() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'BProject/bproject_add',
					method: 'GET',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,

						total: this.addReimbursementForm.total,
						record_time: this.addReimbursementForm.record_time,
						project_name: this.addReimbursementForm.project_name,
						remark: this.addReimbursementForm.remark,
						annex: JSON.stringify(this.submitImgList),
						pte_type:this.addReimbursementForm.pte_type
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
				/* uni.switchTab({
					url: '/pages/finnace/finnace'
				}); */
				uni.navigateBack({
					delta: 1
				})
			},
			// 编辑提交
			async handleSubmitEdit2() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'BProject/bproject_edit',
					method: 'GET',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						project_id: this.editId,

						total: this.addReimbursementForm.total,
						record_time: this.addReimbursementForm.record_time,
						project_name: this.addReimbursementForm.project_name,
						remark: this.addReimbursementForm.remark,
						annex: JSON.stringify(this.submitImgList),
						pte_type:this.addReimbursementForm.pte_type,
						
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
				/* uni.switchTab({
					url: '/pages/finnace/finnace'
				}); */
				uni.navigateBack({
					delta: 1
				})
			},
			// 如果有客户id(获取详情)
			async getClientDetails() {
				// this.addReimbursementForm = {}
				const {
					data: res
				} = await this.$myRequest({
					url: 'BProject/bproject_detail',
					method: 'GET',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,

						project_id: this.editId
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				this.addReimbursementForm = res.datas.info;
				console.log('报销详情', this.addReimbursementForm);
				this.stageList = this.addReimbursementForm.stage_select;
				// ***处理绑定项目id
				this.addReimbursementForm.project_id = [];
				/* this.addReimbursementForm.project_list.forEach(item => {
					this.addReimbursementForm.project_id.push(item.project_id);
					this.client_project_name.push(item.project_name);
				}); */
				// --处理显示的项目id
				/* this.client_project_name_show = this.client_project_name.join(',');
				this.projectList.forEach(item => {
					this.addReimbursementForm.project_id.forEach(items => {
						if (item.project_id == items) {
							item.isChekced = true;
						}
					});
				}); */

				// ***处理文件
				if (this.addReimbursementForm.annex) {
					this.submitImgList = this.addReimbursementForm.annex;
				}
				// 判断是否禁用
				if (
					this.addReimbursementForm.approval_status &&
					this.addReimbursementForm.approval_status == '1'
				) {
					this.isDisable = true;
				}

				if (this.addReimbursementForm.is_draft == '1') {
					this.isDisable = false;
				}
				if (this.addReimbursementForm.is_edit != '1') {
					this.isDisable = true;
					console.log('isDisable')
				}
				// ***处理项目流程
				if (this.addReimbursementForm.approval_log) {
					this.stepList = this.addReimbursementForm.approval_log;
				}
				
				if(this.addReimbursementForm.pte_type == null || this.addReimbursementForm.pte_type == 'null'){
					this.addReimbursementForm.pte_type = '';
				}

			},
			// 获取项目列表
			async getProjectList() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Project/simple_project',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						search: this.searchInfoProject,

					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});

				this.projectList = res.datas.listInfo;
				this.projectList.forEach(item => {
					/* if (item.project_show.length > 20) {
						item.project_show = item.project_show.slice(0, 20) + '....'
					} */
					item.isChekced = false;
				});
				console.log('项目列表(用于表单选项)', this.projectList);
			},
			handleCancleClick() {
				uni.navigateBack();
			},
			// 移除图片
			removeImg(item) {
				const index = this.imgList.findIndex(img => img == item);
				// console.
				if (index != -1) {
					this.imgList.splice(index, 1);
				}
			},
			// 上传图片
			selectImg() {
				var that = this;
				uni.chooseImage({
					count: 6, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: async res => {
						const tempFilePaths = res.tempFilePaths;
						that.phone = res.tempFilePaths[0];
						tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: 'https://control.sxpz.vip/index.php/AppApi/User/uploadImg',
								filePath: item,
								name: 'file',
								formData: {
									member_id: this.member_id,
									token: this.token
								},
								success: uploadFileRes => {
									const result = JSON.parse(uploadFileRes.data);
									this.imgList.push(result.datas.img_url);
								}
							});
						});
					}
				});
			},
			handleClickInput() {
				this.isShowClientType = true;
			},
			handleSearchProject() {
				this.getProjectList();
			},
			// 点击选择报销类型
			changeClientType(item) {
				this.client_type_name = item.name;
				this.addReimbursementForm.type = item.id;
				console.log('选择客户类型', this.addReimbursementForm.type);
				// this.isShowClientType = false
			},
			// 显示报销类型选择
			ShowClientType() {
				this.isShowClientType = !this.isShowClientType;
				this.isShowProjectType = false;
			},
			// 点击选择项目
			changeProjectType(item, indexs) {
				this.projectList[indexs].isChekced = !this.projectList[indexs].isChekced;
				let index = this.addReimbursementForm.project_id.findIndex(my => my == item.project_id);
				if (index == -1) {
					this.client_project_name.push(item.project_show);
					this.addReimbursementForm.project_id.push(item.project_id);
				} else {
					this.client_project_name.splice(index, 1);
					this.addReimbursementForm.project_id.splice(index, 1);
				}
				this.client_project_name_show = this.client_project_name.join(',');
				console.log(item);

				console.log(this.addReimbursementForm.project_id);
			},
			// 显示选择项目
			ShowProjectType() {
				this.isShowProjectType = !this.isShowProjectType;
				this.isShowClientType = false;
			},
			bindStartDateChange(e) {
				this.addReimbursementForm.date = e.target.value;
			},
			// 点击查看进度
			handleChekcPlan() {
				this.planeStatus = !this.planeStatus;
			},
			// 点击左上返回按钮
			back() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.stage_class {
		width: 300rpx;
		margin-left: 30rpx;
		background: #ffffff;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: absolute;

	}

	.stage_nickname {
		font-size: 26rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;

	}

	.bottom2 {
		width: 100%;
	}

	.bottom_btn2 {
		width: 34%;
		height: 88rpx;
		border-radius: 0;
		position: fixed;
		bottom: 0;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		z-index: 999;
	}

	.onFileDate {}

	.stepRow {
		position: relative;
		display: flex;
		justify-content: flex-end;

		.stepIcon {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 10rpx;
			margin-right: 30rpx;
		}

		.finnaceStep {
			position: absolute;
			top: 70rpx;
			right: 30rpx;
			width: 630rpx;
			background: #ffffff;
			z-index: 99;
			box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.2);
			box-sizing: border-box;
			padding: 48rpx 30rpx;
			border-radius: 20px;

			.MyStep {
				position: relative;
				padding-bottom: 20rpx;

				.stepLine {
					position: absolute;
					width: 2px;
					height: 100%;
					left: 12rpx;
					top: 22rpx;
					background-color: #40a0f2;
				}

				.stepRow1 {
					display: flex;
					align-items: center;

					.stepIdot {
						width: 26rpx;
						height: 26rpx;
						margin-right: 20rpx;
					}

					.stepdate {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #128bf1;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.stepRow2 {
					height: auto;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.stepusername {
						margin-left: 20rpx;
						width: 120rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					.stepstatus {
						margin: 20rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #19af3c;
					}
				}
			}
		}
	}

	.oneRowTwo {
		margin-top: 40rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		align-items: center;

		.oneRowtitle {
			width: 130rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.onRowInput {
			padding-left: 10rpx;
			font-size: 28rpx;
			width: 192rpx;
			height: 60rpx;
			border-radius: 10rpx;
			border: 1px solid #dfdfdf;
		}

		.picker_input {
			width: 240rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 10rpx;
			background: #ffffff;
			border: 1px solid #dfdfdf;
			border-radius: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}

	.bottom {
		width: 100%;
		height: 88rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}

	.bottom_btn {
		width: 375rpx;
		height: 88rpx;
		margin-left: 0;
		border-radius: 0;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}

	.textAreaRow {
		.textTitle {
			margin-top: 49rpx;
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #333333;
		}
	}

	.upLoadRow {
		.imgList {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			box-sizing: border-box;
			padding: 0 10rpx;
			margin: 20rpx;

			.imgItem {
				position: relative;
				width: 160rpx;
				height: 134rpx;
				margin-bottom: 20rpx;
			}

			.closeBox {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				background-color: #007aff;
				display: flex;
				justify-content: center;
				align-items: center;
				right: 0;
				top: 0;
			}
		}

		.upTitle {
			margin-top: 49rpx;
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			display: flex;
			margin-bottom: 30rpx;

			.uploadBtn {
				display: flex;
				align-items: center;

				.upImg {
					width: 25rpx;
					height: 18rpx;
					margin-left: 32rpx;
					margin-right: 10rpx;
				}

				.upLoadText {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #128bf1;
				}
			}
		}
	}

	.textar {
		width: 660rpx;
		height: 225rpx;
		background: #f7f7f7;
		margin-top: 30rpx;
		margin-left: 30rpx;
		padding: 20rpx;
	}

	.client_type_change {
		width: 550rpx;
		// height: 180rpx;
		background: #ffffff;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: absolute;
		top: 54rpx;
		right: 30rpx;
		z-index: 99;

		.item_info {
			width: 100%;
			height: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 60rpx;
		}
	}

	.client_project_change {
		width: 550rpx;
		height: 460rpx;
		background: #ffffff;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: absolute;
		top: -460rpx;
		right: 0rpx;
		z-index: 999;

		.searchInput {
			position: relative;

			.sInput {
				padding-left: 20rpx;
				margin: 20rpx auto;
				width: 510rpx;
				height: 60rpx;
				border-radius: 60rpx;
				background-color: #f7f7f7;
			}

			.sousuo_img {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				z-index: 999;
				right: 40rpx;
				top: 20rpx;
			}
		}

		.item_info {
			width: 100%;
			height: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 60rpx;
		}
	}

	.ischeckOutInfo {
		// height: calc(100vh - 158rpx - 70rpx) !important;
		height: calc(100vh - 70rpx) !important;
		padding-bottom: 88rpx;
	}

	.client_info {
		width: 100%;
		// height: calc(100vh - 236rpx);
		height: calc(100vh);
		padding-bottom: 88rpx;
		background-color: #fff;

		.info_title {
			width: 100%;
			height: 102rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			border-bottom: 1px solid #e9e9e9;
			line-height: 102rpx;
			position: relative;
		}

		.info_item_bottom {
			width: 690rpx;
			height: auto;
			margin-left: 30rpx;
			line-height: 94rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			position: relative;

			.check_group {
				position: absolute;
				top: 5rpx;
				left: 140rpx;
				font-size: 26rpx;

				.check_item {
					transform: scale(0.7);
				}
			}
		}

		.info_item2 {
			width: 690rpx;
			height: auto;
			border-bottom: 1rpx solid #e3e3e3;
			margin-left: 30rpx;
			margin-top: 44rpx;
		}


		.info_item {
			width: 690rpx;
			border-bottom: 1px solid #e9e9e9;
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;

			.Warptitle {
				margin: 44rpx 0 40rpx;
			}

			.selectEdit {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.client_type {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				margin-bottom: 14rpx;
				// margin-left: 85rpx;
			}

			.info_img {
				width: 25rpx;
				height: 13rpx;
			}
		}
	}

	.head_text {
		width: 100%;
		height: 128rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 160rpx;
		text-align: center;
		// border-bottom: 20rpx solid #F7F7F7;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.currentType {
		background: #40a0f2;
		color: #ffffff;
	}

	.picker_input_out_container {
		position: relative;
		width: 690rpx !important;

		.dateIcon {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			right: 20rpx;
			top: 8px;
		}

		.picker_input_out {
			width: 690rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 10rpx;
			background: #ffffff;

			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}

	.noticDetails {
		// z-index: 20000!important;
		// position: fixed;
		// top: 5vh;
		// left: 20rpx;
	}

	.detailsImg {
		width: 700rpx;
		z-index: 20000 !important;
		max-height: calc(100vh - 100rpx);

		.datalisImg {
			z-index: 20000 !important;
			width: 100%;
			height: calc(100vh - 100rpx);
		}
	}
</style>
